import React from 'react';
import { Tag, Message, Balloon, Button } from '@teamix/ui';
import Icon from 'components/PersonalSettings/components/icon';
import ItemPopup from 'components/PersonalSettings/components/confirmPopup';
import exceed from 'utils/apimap';
import intl from 'components/PersonalSettings/components/locale';
import dayjs from 'dayjs';

export default class SshItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHover: false,
      showPopup: false,
    };

    this.popupDisplay = this.popupDisplay.bind(this);
  }

  popupDisplay = (show) => {
    this.setState({
      showPopup: show,
    });
  };

  handleMouse = (isHover) => {
    const { showPopup } = this.state;
    if (this.state.isHover && showPopup) {
      return;
    }

    this.setState({
      isHover,
    });
  };

  onDeleteClick = () => {
    const { id } = this.props.dataSource;
    this.delKey(id, false);
  };

  onRevokeClick = () => {
    const { id } = this.props.dataSource;
    this.delKey(id, true);
  };

  delKey = (id, revoke) => {
    const { getKeys } = this.props;
    exceed
      .fetch({
        api: 'gpg.delete',
        params: { id, revoke },
      })
      .then(() => {
        setTimeout(() => {
          Message.success({
            title: '删除成功',
          });
        }, 500);
        getKeys();
      });
  };

  getIcon = () => {
    const { isHover } = this.state;
    return (
      <span>
        {isHover ? (
          <React.Fragment>
            <ItemPopup
              onVisibleChange={this.popupDisplay}
              icon={<Icon type="warning-o" />}
              type="danger"
              title={intl.get('revoke_key')}
              content={intl.get('revoke_key_confirm')}
              confirm={this.onRevokeClick}
              trigger={
                <Button type="primary" style={{ color: '#e62412' }} text>
                  {intl.get('revoke')}
                </Button>
              }
            />
            <ItemPopup
              onVisibleChange={this.popupDisplay}
              icon={<Icon type="warning-o" />}
              type="danger"
              title={intl.get('delete_key')}
              content={intl.get('gpg_delete_key_confirm')}
              confirm={this.onDeleteClick}
              trigger={
                <Button type="primary" style={{ color: '#e62412' }} text>
                  {intl.get('delete')}
                </Button>
              }
            />
          </React.Fragment>
        ) : null}
      </span>
    );
  };

  render() {
    const { dataSource } = this.props;
    const { verified, user_id, created_at, fingerprint, subkeys } = dataSource;
    const { email } = user_id || {};
    return (
      <div
        className="gpg-list-item"
        onMouseEnter={() => {
          this.handleMouse(true);
        }}
        onMouseLeave={() => {
          this.handleMouse(false);
        }}
      >
        <div className="gpg-img">
          <Icon type="permission" />
        </div>
        <div className="gpg-list-item-content">
          <div className="gpg-list-item-content-title">
            <div className="gpg-email">{email}</div>
            {verified ? (
              <Tag color="green">{intl.get('email_has_been_verified')}</Tag>
            ) : (
              <Balloon.Tooltip
                align="t"
                trigger={<Tag color="gray">{intl.get('email_has_not_been_verified')}</Tag>}
              >
                {intl.get('pub_key_not_match')}
              </Balloon.Tooltip>
            )}
          </div>
          <div className="gpg-list-item-content-fingerprint">{fingerprint}</div>
          {subkeys.length > 0 && (
            <div className="gpg-list-item-content-subkeys">
              {subkeys.map((item) => {
                return (
                  <div>
                    {intl.get('sub_public_key')}：{item.fingerprint}
                  </div>
                );
              })}
            </div>
          )}
          <div className="gpg-list-item-content-time">
            {intl.get('create_date')}：{dayjs(created_at).format('YYYY-MM-DD')}
          </div>
        </div>
        <div className="gpg-actions">{this.getIcon()}</div>
      </div>
    );
  }
}
